HTML 的所有元素都有預設的顯示類型，而這些顯示類型是透過 CSS 的 display 屬性進行控制，只有在遇到特殊的網頁版面需求時才需要更動，這篇教學將會介紹 HTML 的元素顯示類型。
原文參考：HTML 元素顯示類型
根據 W3.org 的 CSS display 規範，display 常用的內容 ( 值 ) 如下表所示：
| 值 | 說明 | 換行 |
|---|---|---|
| none | 隱藏元素，將該元素從 HTML 結構樹中移除。 | X |
| contents | 只顯示元素內容，忽略所有 box 屬性 ( 例如邊界、邊框...等 )。 | X |
| block | 「塊級」元素，該元素會強制換行，除非進行 CSS 設定，否則同一個區塊裡，一行只會有一個塊級元素。 | O |
| inline | 「行內」元素，該元素會一個接一個連續下去。 | X |
| inline-block | 「行內」元素裡「包覆塊級」元素，除了具備塊級元素的特性，也可一個接一個連續下去。 | X |
| inline-table | 「行內」元素裡「包覆表格」元素，除了具備表格元素的特性，也可一個接一個連續下去。 | X |
| list-item | 「清單項目」元素，該元素作用和 block 類似，並預載清單相關符號樣式。 | O |
| table | 「表格」元素，該元素作用和 block 類似。 | O |
| flex | 「彈性塊」元素，該元素作用和 block 類似，並可以透過設定，根據外部區塊的尺寸進行彈性縮放。 | O |
| grid | 「格狀」元素，，該元素作用和 block 類似，並可以透過設定，進行版面格狀排版。 | O |
HTML 裡每個元素都有各自預設的顯示類型，下表列出各個元素預設的顯示類型 ( display value )：
| 元素 | display |
|---|---|
| address、article、aside、blockquote、body、dd、details、div、dl、dt、fieldset、figcaption、figure、footer、form、frame、frameset、h1、h2、h3、h4、h5、h6、header、hr、html、iframe、noframes、legend、p、ul、center、dir、menu、nav、ol、pre、summary、section | block |
| map、output、q | inline |
| input、select、img | inline-block |
| area、datalist、head、link、param、title、style、script | none |
| table | table |
| tr | table-row |
| thead | table-header-group |
| tbody | table-row-group |
| tfoot | table-footer-group |
| caption | table-caption |
| col | table-column |
| colgroup | table-column-group |
| td、th | table-cell |
| caption | table-caption |
| li | list-item |
元素的顯示類型說重要也不是很重要，說不重要但又有相當程度的重要性，總之如果瞭解了元素的顯示類型，在網頁的排版與架構上，都更能得心應手！
大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^
iThome鐵人賽
看影片追技術